<template>
  <div class="my">
    <navigation-bar :isShowBack="false" :pageName="'个人中心'"></navigation-bar>
    <!-- 头部区域 -->
    <div @click="onLoginClick" class="my-content-header">
      <img alt class="my-content-header-avater" src="@img/avater.png" />
      <p class="my-content-header-login">{{$store.state.username ? $store.state.username : '登录/注册'}}</p>
    </div>
    <!-- 工具栏区域 -->
    <div class="my-content-tools">
      <div :key="index" class="my-content-tools-item" v-for="(item, index) in toolsData">
        <p class="my-content-tools-item-name">{{item}}</p>
        <img alt class="my-content-tools-item-arrow" src="@img/right-arrow.svg" />
      </div>
    </div>
    <!-- 存在登录用户，展示退出登录按钮 -->
    <div
      @click="onLogoutClick"
      class="my-content-logout page-commit"
      v-if="$store.state.username"
    >退出登录</div>
  </div>
</template>

<script>
import NavigationBar from '@com/currency/NavigationBar.vue'
export default {
  name: 'My',
  components: {
    NavigationBar
  },
  data () {
    return {
      toolsData: [
        '全部订单',
        '我的预约',
        '应用推荐',
        '用户福利'
      ]
    }
  },
  methods: {
    // 登录
    onLoginClick: function () {
      this.$router.push({
        name: 'login',
        params: {
          routerType: 'push'
        }
      })
    },
    /**
     * 退出登录按钮点击事件
     */
    onLogoutClick () {
      alert('退出')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.my {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  background-color: $bgColor;
  &-content {
    height: 100%;
    width: 100%;
    // 头部区域
    &-header {
      margin-top: $marginSize;
      background-color: white;
      height: px2rem(68);
      display: flex;
      align-items: center;
      border-top: px2rem(1) solid $lineColor;
      border-bottom: px2rem(1) solid $lineColor;
      padding: $marginSize;

      &-avater {
        width: px2rem(52);
        height: px2rem(52);
      }

      &-login {
        margin-left: $marginSize;
        font-size: $titleSize;
      }
    }
    // 工具栏
    &-tools {
      &-item {
        display: flex;
        height: px2rem(46);
        box-sizing: border-box;
        align-items: center;
        padding: $marginSize;
        background-color: white;
        border-bottom: px2rem(1) solid $lineColor;

        &-name {
          font-size: $infoSize;
          flex-grow: 1;
        }

        &-arrow {
          width: px2rem(16);
        }
      }
    }
    // 退出登录按钮
    &-logout {
      margin-top: 20%;
    }
  }
}
</style>
